<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
        <style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }
        </style>
        <style type="text/css">
            
            /* root element for tabs  */
            ul.css-tabs {
                margin: 0 !important;
                padding: 0;
                height: 30px;
                border-bottom: 1px solid #666;
            }
            
            /* single tab */
            ul.css-tabs li {
                float: left;
                padding: 0;
                margin: 0;
                list-style-type: none;
            }
            
            /* link inside the tab. uses a background image */
            ul.css-tabs a {
                float: left;
                font-size: 13px;
                display: block;
                padding: 5px 30px;
                text-decoration: none;
                border: 1px solid #666;
                border-bottom: 0px;
                height: 18px;
                background-color: #efefef;
                color: #777;
                margin-right: 2px;
                position: relative;
                top: 1px;
                outline: 0;
                -moz-border-radius: 4px 4px 0 0;
            }
            
            ul.css-tabs a:hover {
                background-color: #F7F7F7;
                color: #333;
            }
            
            /* selected tab */
            ul.css-tabs a.current {
                background-color: #ddd;
                border-bottom: 1px solid #ddd;
                color: #000;
                cursor: default;
            }
            
            /* tab pane */ .css-panes div {
                display: none;
                border: 1px solid #666;
                border-width: 0 1px 1px 1px;
                min-height: 150px;
                padding: 15px 20px;
                background-color: #ddd;
            }
            
            
            
        </style>
        <style type="text/css">
        	/*
增加皮肤勾子skin2
*/
            /* alternate colors: skin2 */
            ul.skin2 a {
                background-color: #89a;
                color: #fff !important;
            }
            
            /* mouseover state */
            ul.skin2 a:hover {
                background-color: #678;
            }
            
            /* active tab */
            ul.skin2 a.current {
                background-color: #4F5C6A;
                border-bottom: 2px solid #4F5C6A;
            }
            
            /* tab pane with background gradient */
            div.skin2 div {
                min-height: 200px;
                color: #fff;
                background: #234 url(./img/gradient/h300.png) repeat-x scroll 0 -50px;
                /* IE6 does not support PNG24 images natively */
            }
        </style>
        <script type="text/javascript">
            $(function(){
                $("ul.skin2").tabs("div.skin2 > div");
            });
        </script>
    </head>
    <body>
        <ul class="css-tabs skin2">
            <li>
                <a href="#">Tab 1</a>
            </li>
            <li>
                <a href="#">Second tab</a>
            </li>
            <li>
                <a href="#">A ultra long third tab</a>
            </li>
        </ul>
        <div class="css-panes skin2">
            <div>
                <img src="./img/title/eye192.png" alt="Flying screens" style="float:left;margin:0 30px 20px 0"/><h2>Lorem ipsum dolor sit amet</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
                    viverra, leo sit amet auctor fermentum, risus lorem posuere
                    tortor, in accumsan purus magna imperdiet sem.
                </p>
                <p>
                    Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas
                    facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus
                    nibh metus, faucibus quis, semper ut, dignissim id, diam.
                </p>
            </div>
            <div>
                <p>
                    Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui,
                    molestie sed, tristique sit amet, blandit eu, turpis. Mauris
                    hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed
                    molestie dui quam vitae dui.
                </p>
                <p>
                    Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget
                    tortor. Maecenas id augue. Vivamus interdum nulla ac
                    dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus
                    eget dui volutpat molestie.
                </p>
            </div>
            <div>
                <p>
                    Maecenas at odio. Nunc laoreet lectus vel ante. Nullam
                    imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a,
                    nisl. Cum sociis natoque penatibus et magnis dis parturient
                    montes, nascetur ridiculus mus.
                </p>
                <p>
                    In sed dolor. Etiam eget quam ac nibh pharetra
                    adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu
                    mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis
                    nisi. Vivamus at enim. Integer semper imperdiet
                    massa. Vestibulum nulla massa, pretium quis, porta id,
                    vestibulum vitae, velit.
                </p>
            </div>
        </div>
    </body>
</html>
